<div style="width: 100%; height: 100%; background-color: #E8E9E8 !important;">
  <!-- 头部 服务业绩 -->
  <div class="phone-head" *ngFor="let list of tabData">
    <div>
      <div>
        <div>
          <div class="head-tit">
            <span class="city">
                <apes-form-item style="display: flex">
                  <i class="anticon anticon-environment city-i"></i>
                  <apes-form-control>
                    <ng-select class="city-select"
                               [items]="complay"
                               bindLabel="name"
                               bindValue="id"
                               [(ngModel)]="selectedValue"
                               [clearable]="false"
                               [searchable]="false"
                               (change)="change()">
                    </ng-select>
                  </apes-form-control>
                </apes-form-item>
            </span>
            <span class="date"><i class="anticon anticon-calendar"></i> {{ nowdate }}</span>
          </div>
          <div class="head-con">
            <div class="head-box" *ngFor="let data of list.headList">
              <div>
                <div class="head-title">{{ data.handname }}</div>
                <div class="head-fontColor" (click)="toChildLeaderboard(data)">
                  <span class="yuan">¥</span>
                  <span class="num" countUp [endVal]=" titleList[data.feild] ">0.00</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间折线图 -->
    <div class="chart-wrapper card">
      <nav *ngFor="let list of tabData">
        <div *ngFor="let data of list.titleList">
          <div class="line" *ngIf="data.handname == '七天销售业绩'">
            <span><img class="line-img" [src]="'assets/tmp/img/bi/FWYJ/'+data.feild+'.png'"></span>
            <span class="line-tit">{{ data.handname }}</span>
          </div>
        </div>
      </nav>
      <canvas id="mountNode"></canvas>
    </div>

    <!-- 底部 6格 -->
    <apes-card [apesBordered]="false" [apesBodyStyle]="{'padding.px': 0}" class="paper">
      <div pes-row apesGutter="2" *ngFor="let list of tabData">
        <ul *ngFor="let data of list.titleList">
          <li class="ul-li" apes-col apesSpan="8"
              *ngIf="data.handname !== '服务业绩' && data.handname !== '七天销售业绩' && data.handname !== '保险业绩' ">
            <div class="paper-box li-div" (click)="toChildLeaderboard(data)">
              <div (click)="toChildLeaderboard(data)">
                <div>
                  <span><img class="paper-img" [src]="'assets/tmp/img/bi/FWYJ/'+data.feild+'.png'"></span>
                  <span>{{ data.handname }}</span>
                </div>
                <div class="paper-title">
                  <span class="paper-yuan">¥</span>
                  <span class="paper-num" countUp [endVal]=" titleList[data.feild] ">0.00</span>
                </div>
              </div>

            </div>
          </li>
        </ul>
      </div>
    </apes-card>

    <!-- 底部3格 -->
    <apes-card [apesBordered]="false" [apesBodyStyle]="{'padding.px': 0}" class="paper">
      <div pes-row apesGutter="2" *ngFor="let list of tabData">
        <ul *ngFor="let data of list.footerList">
          <li class="ul-li" apes-col apesSpan="8">
            <div class="paper-box li-div" (click)="toChildLeaderboard(data)">
              <div (click)="toChildLeaderboard(data)">
                <div>
                  <span><img class="paper-img" [src]="'assets/tmp/img/bi/FWYJ/'+data.feild+'.png'"></span>
                  <span>{{ data.handname }}</span>
                </div>
                <div class="paper-title">
                  <span class="paper-yuan" *ngIf="data.handname !== '车流/台'">¥</span>
                  <span class="paper-num" countUp [endVal]=" titleList[data.feild] ">0.00</span>
                </div>
              </div>

            </div>
          </li>
        </ul>
      </div>
    </apes-card>
  </div>
</div>
